<template>
  <el-aside id="aside" :class="{collapsed: collapsed}" @click.native="toggle">
    <h1>
      <span>蜂</span>
      <span>大侠</span>
    </h1>

    <div id="user_panel" style="text-align: center; padding-top: 20px;">
      <el-avatar fit="cover" src="//i.loli.net/2020/01/06/NWnY71jcVqZwRr8.jpg"/>
      <div class="label">
        <span class="name">憨豆</span>
        <span>100898</span>
      </div>
    </div>

    <el-menu mode="vertical" @click.native.stop :collapse="collapsed" :default-active="curMenuIndex">
      <el-menu-item v-for="(item, idx) in this.menus" :key="idx" :index="item.name">
        <router-link :to="{name:item.name}">
          <i :class="item.icon"/>
          <span>{{ item.label }}</span>
        </router-link>
      </el-menu-item>
    </el-menu>

  </el-aside>
</template>

<script>
  import router from '../'
  import _ from 'lodash'

  export default {
    name: "site-aside",
    mounted() {
      this.curMenuIndex = this.$route.name;
    },
    beforeRouteUpdate(to, from, next) {
      this.curMenuIndex = to.name;
      next()
    },
    data() {
      return {
        router: router,
        collapse: -1,
        curMenuIndex: '',
      }
    },
    computed: {
      menus() {
        return _.filter(_.map(this.router.children, this.getItem), (item) => item);
      },
      collapsed() {
        if (this.collapse === -1) {
          return this.$store.state.wSize.width < 768;
        }
        return this.collapse === 1;
      }
    },
    methods: {
      toggle() {
          this.collapse = this.collapsed ? 0 : 1;
      },
      getItem(rItem) {
        if (rItem && rItem.meta) {
          return {
            name: rItem.name,
            path: rItem.path,
            label: rItem.meta.label,
            icon: rItem.meta.icon,
          }
        }
        return false;
      }
    }
  }
</script>

<style scoped lang="less">
  h1 {
    margin: 0;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
  }

  .el-menu-item span {
    display: inline-block;
    margin-left: 5px;
  }

  #aside {
    background-color: #ffffff;
    border-right: solid 1px #e6e6e6;

    transition: width .3s, background-color .3s;
    cursor: default;
    overflow: hidden;
    width: 140px !important;
    min-height: 100%;

    .el-avatar, .el-avatar img {
      transition: width .3s, height .3s;
      height: 60px;
      width: 60px;
      line-height: 60px;
    }

    .label {
      text-align: center;
      padding: 12px;
      overflow: hidden;
      white-space: nowrap;

      span {
        display: block;
        font-size: 12px;
        text-align: center;

        &.name {
          font-size: 18px;
        }
      }
    }

    &.collapsed {
      width: 65px !important;

      .el-avatar, .el-avatar img {
        height: 32px;
        width: 32px;
        line-height: 32px;
      }

      .label, h1 span:nth-last-child(1) {
        display: none;
      }
    }

    .el-menu {
      border-right-style: none;
    }

    .el-menu-item {
      padding-right: 0 !important;
      padding-left: 0 !important;

      a {
        display: block;
        padding: 0 20px;

        &:focus {
          background-color: #ecf5ff;
        }
      }

      &.is-active {
        a {
          color: #409EFF;
        }
      }
    }

  }
</style>
